<!-- 设备信息 -->
<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <h1>设备信息</h1>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="20" :offset="4">
        工艺名称:
        <el-input style="width: 200px" v-model="technology.name"></el-input>
        <el-button type="success" size="medium" @click="queryList()"
          >查询</el-button
        >
        <el-button type="info " size="medium" @click="clear()">重置</el-button>
      </el-col>

      <el-col :span="12" :offset="0">
        <el-button type="primary" size="medium" @click="sava('添加')"
          >添加</el-button
        >
      </el-col>
    </el-row>
    <el-row :gutter="24">
      <el-col :span="24" :offset="0">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="120" />
          <el-table-column prop="code" label="工艺名称" width="120" />
          <el-table-column prop="model" label="工艺名称" width="120" />
          <el-table-column prop="name" label="工艺名称" width="120" />
          <el-table-column prop="productDate" label="工艺名称" width="120" />
          <el-table-column prop="batchNo" label="工艺名称" width="120" />
          <el-table-column prop="manufacturer" label="产品" width="180" />
          <el-table-column prop="status" label="状态" width="180" />
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="getUpdateById(scope.$index, scope.row, '编辑')"
                >编辑</el-button
              >

              <el-popconfirm
                confirm-button-text="要删"
                cancel-button-text="不删"
                icon="el-icon-info"
                icon-color="red"
                title="要删除这条数据吗?"
                @confirm="deleteById(scope.$index, scope.row)"
              >
                <el-button size="mini" type="danger" slot="reference"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

    <!-- 弹框 -->
    <!-- <el-dialog :title="title" width="40%" :visible.sync="savaOrUpdateDialog">
      <div>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">工艺名称: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.name" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">产品: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.product" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">型号: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.type" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">规格: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input
              style="width: 200px"
              v-model="saveOrUpdateInfo.specification"
            />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">单位: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.unit" />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">单位耗电量: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input
              style="width: 200px"
              v-model="saveOrUpdateInfo.consumption"
            />
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="5" :offset="5">
            <span style="line-height: 40px">备注: </span>
          </el-col>
          <el-col :span="5" :offset="0">
            <el-input style="width: 200px" v-model="saveOrUpdateInfo.remark" />
          </el-col>
        </el-row>
      </div>
      <span slot="footer">
        <el-button @click="savaOrUpdateDialog = false">Cancel</el-button>
        <el-button type="primary" @click="saveOrUpdate()">OK</el-button>
      </span>
    </el-dialog> -->

    <div class="block">
      <span class="demonstration">调整每页显示条数</span>
      <el-pagination
        @size-change="findData"
        @current-change="findData"
        :current-page.sync="pageNum"
        :page-sizes="[3, 5, 7, 9]"
        :page-size.sync="pageSize"
        layout="sizes, prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { listByPageByLike } from "../../api/mes/mes_equipment";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      pageNum: 1,
      pageSize : 3,
      total :0,
      mesEquipment:{},
      tableData:[],
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    findData() {
      listByPageByLike(this.pageNum,this.pageSize,this.mesEquipment).then((resp)=>{
        this.tableData = resp.data.list;
        this.total = resp.data.total;
      });
    },
    deleteById(){
      
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    findData();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
</style>